<!--
 * @Author: fishroom
 * @Date: 2021-08-24 02:00:32
 * @LastEditTime: 2021-09-02 09:20:38
 * @FilePath: \backstage\src\components\content\input\InputTwo.vue
-->
<template>
  <div class="input-box">
    <div class="input-item">
      <input
        type="text"
        name=""
        class="ipt-item"
        placeholder="全部"
        :value="value"
        @click="isFlag()"
      />
      <span class="iconfont pull-down">&#xe601;</span>
      <span class="triangle" v-show="flag"></span>
    </div>
    <div class="showInput" v-if="List.length > 0" v-show="flag">
      <ul class="input-pad">
        <li
          class="select-item text-center"
          v-for="(item, index) in List"
          :key="item.id"
          @click="activeClick(index, $event, item.id)"
        >
          {{ item.name }}
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: "InputItem",
  data() {
    return {
      count: 0,
      value: "",
      flag: false
    };
  },
  props: {
    List: {
      type: Array,
      default() {
        return [];
      }
    }
  },
  methods: {
    activeClick(index, e, id) {
      this.value = e.target.innerHTML;
      this.count = index;
      this.flag = false;
      this.$emit("ChildClick", index, e.target.innerHTML, id);
    },
    isFlag() {
      this.flag = !this.flag;
    }
  }
};
</script>
